.banner{background-image: url(../images/about-header.jpg);background-size:cover;background-position:center;padding:250px 0;margin-top: -20px;position:relative;z-index: -1;}
.header-top nav li:nth-child(2){background-color: #333333;transition:background-color 700ms;}
.header-top nav li:nth-child(2):hover{background-color: #202020;}
.main-inner{width: 80%;margin:0 auto;padding:50px 0;}
.main-inner .top{margin-bottom:60px;}
.main-inner .top>h2{color: #fff;text-align: center;}
.top>p{width:60%;margin:20px auto;text-align: center;font-size: 1.6em;}
.top li{padding:30px 3%;width:24%;border:2px solid #303030;float: left;}
.top li:nth-child(2){margin:0 4%;}
.pic{width: 100%;margin:0 auto;}
.pic img{width: 100%;height:auto;margin-bottom: 10px;}
.top a{color: #fff;}
.top li h3{color:#d54ab6;font-size: 1.6em;margin:20px 0;}
.top li a{transition:text-shadow 400ms;color:#666;}
.top li a:hover{text-shadow:1px 1px 4px #666;}
.top li p{font-size: 1.4em;}
.main-inner .bottom{border-top: 1px solid #303030;padding-top:50px;font-size: 1.4em;}
.main-inner .bottom .left{float: left;width: 50%;text-align:center;}
.left h2{color: #fff;margin-bottom: 20px;}
.main-inner .bottom .right{float: left;width:45%;color: #808080;margin-left:50px;}
.right .demo{margin-top:25px;}
.right .demo span:nth-child(2){display: block;float: right;}
.right .demo .bar{height: 4px;width:100%;background-color:#F5F5F5;margin-top:10px;}
.right .demo .bar .yellow{width: 90%;background-color:#f0ad4e;height: 4px;}
.red{width: 85%;background-color:#d9534f;height: 4px;}
.blue{width:60%;background-color:#337ab7;height: 4px;}